﻿

.mud-slider {
    color: var(--mud-palette-text-primary);
    display: inline-block;
    width: 100%;
    user-select: none;

    & > .mud-typography {
        margin-top: 10px;
    }

    & > input {
        -webkit-appearance: none;
        -moz-appearance: none;
        position: relative;
        display: block;
        width: 100%;
        background-color: transparent;
        cursor: pointer;

        &:focus {
            outline: none;
        }

        @include slider-track {
            margin: 10px 0;
            border-radius: 1px;
            width: 100%;
            height: 2px;
        }

        @include slider-thumb {
            appearance: none;
            -webkit-appearance: none;
            border: none;
            border-radius: 50%;
            height: 2px;
            width: 2px;
            transform: scale(6, 6);
            transition: box-shadow 0.2s;
        }

        @each $color in $mud-palette-colors {
            &.mud-slider-#{$color} {
                @include slider-track {
                    background-color: rgba(var(--mud-palette-#{$color}-rgb), 0.30);
                }

                @include slider-thumb {
                    background-color: var(--mud-palette-#{$color});
                }

                &:active, &:focus-visible {
                    @include slider-thumb {
                        box-shadow: 0 0 0 2px rgba(var(--mud-palette-#{$color}-rgb), 0.24) !important;
                    }
                }

                @include slider-thumb {
                    &:hover {
                        box-shadow: 0 0 0 2px rgba(var(--mud-palette-#{$color}-rgb), 0.24) !important;
                    }
                }
            }
        }

        &:disabled {
            cursor: default;
            opacity: 0.38;

            @include slider-track {
                background-color: var(--mud-palette-text-disabled);
            }

            @include slider-thumb {
                background-color: rgb( 0, 0, 0);
                color: rgb(255, 255, 255);
                box-shadow: 0 0 0 1px rgb( 255, 255, 255) !important;
                transform: scale(4, 4);

                &:hover {
                    box-shadow: 0 0 0 1px rgb( 255, 255, 255) !important;
                }
            }
        }
    }
}
